<template>
  <div class="icon-demo">
    <!-- 基础图标 -->
    <i class="ri-home-line"></i>
    <i class="ri-user-line"></i>
    <i class="ri-settings-line"></i>

    <!-- 不同尺寸 -->
    <i class="ri-home-line ri-lg"></i>
    <i class="ri-home-line ri-2x"></i>
    <i class="ri-home-line ri-3x"></i>

    <!-- 填充样式 -->
    <i class="ri-home-fill"></i>
    <i class="ri-user-fill"></i>

    <!-- 自定义颜色 -->
    <i class="ri-home-line" style="color: #409EFF;"></i>
  </div>
</template>

<style scoped>
.icon-demo {
  padding: 20px;
}

.icon-demo i {
  margin-right: 20px;
  cursor: pointer;
}

.icon-demo i:hover {
  color: #409EFF;
}
</style> 